<template>
    <a-spin :spinning="!load">
        <a-drawer title="详情" placement="right" :closable="false" :visible="show" @close="onClose" width="500">
            <a-descriptions>
                <a-descriptions-item label="记录ID">
                    {{ data?.id }}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="检查结果">
                    {{ data?.checkResultTitle }}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="计划任务id">
                    {{ data?.checkTaskId }}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="检查类型">
                    {{ checkTypeList.find(x => x.value === data?.checkType)?.name }}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="组织id">
                    {{ data?.orgId }}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="组织名称">
                    {{ data?.orgName }}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="表格id">
                    {{ data?.questionTableId }}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="上报人">
                    {{ data?.reportUser }}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="上报人id">
                    {{ data?.reportUserId }}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="进度">
                    {{ statusList.find(x => x.value === data?.status)?.name }}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="计划任务名称">
                    {{ data?.taskName }}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="检查表格结果">
                    <div v-for="(item, index) in data.recordResultDTOList" :key="index">
                        <a-descriptions>
                            <a-descriptions-item label="id">
                                {{ item?.id }}
                            </a-descriptions-item>
                            <a-descriptions-item label="附件">
                                {{ item?.fileUrl }}
                            </a-descriptions-item>
                            <a-descriptions-item label="问题id">
                                {{ item?.questionId }}
                            </a-descriptions-item>
                            <a-descriptions-item label="选择题答案">
                                {{ item?.questionOptionId }}
                            </a-descriptions-item>
                            <a-descriptions-item label="简答题答案">
                                {{ item?.questionResult }}
                            </a-descriptions-item>
                            <a-descriptions-item label="备注">
                                {{ item?.remark }}
                            </a-descriptions-item>
                        </a-descriptions>
                    </div>
                </a-descriptions-item>
            </a-descriptions>
            <div :style="{
                position: 'absolute',
                bottom: 0,
                width: '100%',
                borderTop: '1px solid #e8e8e8',
                padding: '10px 16px',
                textAlign: 'right',
                left: 0,
                background: '#fff',
                borderRadius: '0 0 4px 4px',
            }">
                <a-button type="primary" @click="show = false">
                    关闭
                </a-button>
            </div>
        </a-drawer>
    </a-spin>
</template>
<script>
export default {
    props: {
        // 检查类型列表
        checkTypeList: {
            default: () => { },
            type: Array,
        },
        // 状态列表
        statusList: {
            default: () => { },
            type: Array,
        },
    },
    data() {
        return {
            // 是否显示
            show: false,
            pStyle: {
                fontSize: '16px',
                color: 'rgba(0,0,0,0.85)',
                lineHeight: '24px',
                display: 'block',
                marginBottom: '16px',
            },
            pStyle2: {
                marginBottom: '24px',
            },
            // 加载状态
            load: true,
            // 详情数据
            data: {},
        }
    },
    methods: {
        /**
         * 打开抽屉
         */
        open(data) {
            this.show = true
            this.data = data
        },
        onClose() {
            this.show = false;
        },
    },
}
</script>